<template>
  <div>
    <van-nav-bar
      title="乐购"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />
    <div class="title">我的收藏</div>
    <ul class="c-list">
 <router-link class="c-list-item" v-for="item in list" :key="item.id" tag="li" :to="{path:'/category/detail',query:{id:item.id}}" >
          <img :src="item.list_pic_url" alt="" />
          <p>{{ item.name }}</p>
          <p class="price">￥{{item.retail_price}}</p>
        
          </router-link>
    
    </ul>
  </div>
</template>

<script>
import { listAction } from "@/api/mine";
export default {
  data() {
    return {
        list:{}
    };
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
    init(){
      listAction({
      openId: localStorage.getItem("openId"),
    }).then((res) => {
      console.log(res);
      this.list=res.collectGoodsList;
    });
    }
  },
  created() {
    this.init();
  },
  mounted() {},
};
</script>

<style lang="scss">
.title{
    padding: 0.26667rem 0;
    text-align: center;
    background: #fff;
    margin-bottom: 0.06667rem;
    font-size: .48rem;
    font-weight: 700;
}
    .c-list {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  width: 100%;
  padding: 0.26667rem 0;
  background: #fff;

.c-list-item {
  width: 50%;
  font-size: 12px;
  color:#000;
  img {
    width: 100%;
  }
  .price {
  color: #9c3232;
  font-size: 0.32rem;
}
}}
</style>